<template>
  <div class="editor-examples">
    <h2>富文本编辑器使用示例</h2>
    
    <!-- 完整工具栏 -->
    <div class="example-section">
      <h3>完整工具栏</h3>
      <RichTextEditor 
        ref="editor1"
        :value="content1"
        @input="updateContent1"
        placeholder="请输入内容..."
        :toolbar-config="fullToolbarConfig"
      />
      
      <!-- 变量管理面板 -->
      <div class="variable-panel">
        <h4>变量管理</h4>
        <div class="variable-actions">
          <button @click="getAllVariables" class="btn btn-primary">获取所有变量</button>
          <button @click="getVariableConfig" class="btn btn-secondary">获取变量配置</button>

          <button @click="showVariableList = !showVariableList" class="btn btn-info">
            {{ showVariableList ? '隐藏' : '显示' }}变量列表
          </button>

        </div>
        
        <!-- 变量列表 -->
        <div v-if="showVariableList && variables.length > 0" class="variable-list">
          <h5>当前变量列表：</h5>
          <div v-for="variable in variables" :key="variable.id" class="variable-item">
            <div class="variable-info">
              <span class="variable-id">ID: {{ variable.id }}</span>
              <span class="variable-text">内容: {{ variable.text }}</span>
              <span class="variable-index">索引: {{ variable.index }}</span>
            </div>
            <div class="variable-actions">
              <input 
                v-model="variable.newContent" 
                placeholder="新内容"
                class="variable-input"
              />
              <button @click="updateVariableContent(variable.id, variable.newContent)" class="btn btn-sm btn-success">
                更新
              </button>
              <button @click="removeVariableById(variable.id)" class="btn btn-sm btn-danger">
                删除
              </button>
            </div>
          </div>
        </div>
        

        
        <!-- 变量配置信息 -->
        <div v-if="variableConfig" class="variable-config">
          <h5>变量配置信息：</h5>
          <pre>{{ JSON.stringify(variableConfig, null, 2) }}</pre>
        </div>
      </div>
    </div>
    
    <!-- 简化工具栏 -->
    <div class="example-section">
      <h3>简化工具栏</h3>
      <RichTextEditor 
        :value="content2"
        @input="updateContent2"
        placeholder="请输入内容..."
        :toolbar-config="simpleToolbarConfig"
      />
    </div>
    
    <!-- 只读模式 -->
    <div class="example-section">
      <h3>只读模式</h3>
      <RichTextEditor 
        :value="content3"
        @input="updateContent3"
        :readonly="true"
        :toolbar-config="{ show: false }"
      />
    </div>
    
    <!-- 自定义工具栏 -->
    <div class="example-section">
      <h3>自定义工具栏</h3>
      <RichTextEditor 
        :value="content4"
        @input="updateContent4"
        placeholder="请输入内容..."
        :toolbar-config="customToolbarConfig"
      />
    </div>
  </div>
</template>

<script>
import RichTextEditor from './index.vue'

export default {
  name: 'EditorExamples',
  components: {
    RichTextEditor
  },
  data() {
    return {
      content1: `<p>这是完整工具栏的示例内容,您可以选中文本进行批注。</p>
      <p>用于测试编辑器功能，请忽略，2025-07-13 文本批注</p>`,
      content2: '<p>这是简化工具栏的示例内容</p>',
      content3: '<p>这是只读模式的示例内容</p>',
      content4: '<p>这是自定义工具栏的示例内容</p>',
      
      // 变量管理相关状态
      variables: [],
      variableConfig: null,
      showVariableList: false,

      
      // 完整工具栏配置
      fullToolbarConfig: {
        show: true,
        groups: [
          {
            name: 'text',
            title: '文本格式',
            tools: ['bold', 'italic', 'underline', 'strikethrough']
          },
          {
            name: 'align',
            title: '对齐方式',
            tools: ['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull']
          },
          {
            name: 'list',
            title: '列表',
            tools: ['insertUnorderedList', 'insertOrderedList']
          },
          {
            name: 'insert',
            title: '插入',
            tools: ['createLink', 'insertImage','insertTable','insertIframe','insertVariable']
          },
          {
            name: 'action',
            title: '操作',
            tools: ['undo', 'redo', 'clear','comment','voiceToText']
          }
        ],
        fontSize: {
          show: true,
          options: [
            { value: '1', label: '12px' },
            { value: '2', label: '14px' },
            { value: '3', label: '16px' },
            { value: '4', label: '18px' },
            { value: '5', label: '20px' },
            { value: '6', label: '24px' },
            { value: '7', label: '36px' }
          ]
        },
        fontFamily: {
          show: true,
          options: [
            { value: '1', label: '微软雅黑' },
            { value: '2', label: '宋体' },
            { value: '3', label: '仿宋' },
            { value: '4', label: '楷体' },
            { value: '5', label: '黑体' }
          ]
        },
        colors: {
          show: true,
          textColor: true,
          backgroundColor: true
        }
      },
      
      // 简化工具栏配置
      simpleToolbarConfig: {
        show: true,
        groups: [
          {
            name: 'text',
            title: '文本格式',
            tools: ['bold', 'italic', 'underline']
          },
          {
            name: 'align',
            title: '对齐方式',
            tools: ['justifyLeft', 'justifyCenter', 'justifyRight']
          },
          {
            name: 'list',
            title: '列表',
            tools: ['insertUnorderedList', 'insertOrderedList']
          }
        ],
        fontSize: {
          show: true,
          options: [
            { value: '3', label: '16px' },
            { value: '4', label: '18px' },
            { value: '5', label: '20px' }
          ]
        },
        colors: {
          show: true,
          textColor: true,
          backgroundColor: false
        }
      },
      
      // 自定义工具栏配置
      customToolbarConfig: {
        show: true,
        groups: [
          {
            name: 'basic',
            title: '基础格式',
            tools: ['bold', 'italic']
          },
          {
            name: 'insert',
            title: '插入',
            tools: ['createLink', 'insertImage']
          },
          {
            name: 'action',
            title: '操作',
            tools: ['undo', 'redo']
          }
        ],
        fontSize: {
          show: false
        },
        colors: {
          show: true,
          textColor: true,
          backgroundColor: false
        }
      }
    }
  },
  methods: {
    updateContent1(value) {
      // 只处理字符串类型的值，忽略事件对象
      if (typeof value === 'string') {
        this.content1 = value
      }
    },
    updateContent2(value) {
      // 只处理字符串类型的值，忽略事件对象
      if (typeof value === 'string') {
        this.content2 = value
      }
    },
    updateContent3(value) {
      // 只处理字符串类型的值，忽略事件对象
      if (typeof value === 'string') {
        this.content3 = value
      }
    },
    updateContent4(value) {
      // 只处理字符串类型的值，忽略事件对象
      if (typeof value === 'string') {
        this.content4 = value
      }
    },
    
    // 变量管理方法
    getAllVariables() {
      if (this.$refs.editor1) {
        this.variables = this.$refs.editor1.getVariables()
        console.log('获取到的变量:', this.variables)
        this.$message.success(`获取到 ${this.variables.length} 个变量`)
      }
    },
    
    getVariableConfig() {
      if (this.$refs.editor1) {
        this.variableConfig = this.$refs.editor1.getVariableConfigData()
        console.log('变量配置:', this.variableConfig)
        this.$message.success('获取变量配置成功')
      }
    },
    
    updateVariableContent(variableId, newContent) {
      if (this.$refs.editor1 && newContent) {
        const success = this.$refs.editor1.updateVariable(variableId, newContent)
        if (success) {
          this.$message.success('变量更新成功')
          // 重新获取变量列表
          this.getAllVariables()
        } else {
          this.$message.error('变量更新失败')
        }
      }
    },
    
    removeVariableById(variableId) {
      if (this.$refs.editor1) {
        const success = this.$refs.editor1.removeVariableById(variableId)
        if (success) {
          this.$message.success('变量删除成功')
          // 重新获取变量列表
          this.getAllVariables()
        } else {
          this.$message.error('变量删除失败')
        }
      }
    },
    

  }
}
</script>

<style scoped>
.editor-examples {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.example-section {
  margin-bottom: 30px;
}

.example-section h3 {
  margin-bottom: 10px;
  color: #374151;
  font-size: 16px;
  font-weight: 600;
}

.rich-text-editor {
  height: 800px;
}

/* 变量管理面板样式 */
.variable-panel {
  margin-top: 20px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.variable-panel h4 {
  margin-bottom: 15px;
  color: #495057;
  font-size: 14px;
  font-weight: 600;
}

.variable-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.2s ease;
}

.btn-primary {
  background: #007bff;
  color: white;
}

.btn-primary:hover {
  background: #0056b3;
}

.btn-secondary {
  background: #6c757d;
  color: white;
}

.btn-secondary:hover {
  background: #545b62;
}

.btn-info {
  background: #17a2b8;
  color: white;
}

.btn-info:hover {
  background: #117a8b;
}

.btn-success {
  background: #28a745;
  color: white;
}

.btn-danger {
  background: #dc3545;
  color: white;
}

.btn-sm {
  padding: 4px 8px;
  font-size: 11px;
}

/* 变量列表样式 */
.variable-list {
  margin-top: 15px;
}

.variable-list h5 {
  margin-bottom: 10px;
  color: #495057;
  font-size: 13px;
  font-weight: 600;
}

.variable-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  margin-bottom: 8px;
  background: white;
  border-radius: 4px;
  border: 1px solid #dee2e6;
}

.variable-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.variable-id {
  font-size: 11px;
  color: #6c757d;
  font-family: monospace;
}

.variable-text {
  font-size: 12px;
  color: #495057;
  font-weight: 500;
}

.variable-index {
  font-size: 11px;
  color: #6c757d;
}

.variable-input {
  padding: 4px 8px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  font-size: 11px;
  width: 120px;
}

/* 变量配置样式 */
.variable-config {
  margin-top: 15px;
}

.variable-config h5 {
  margin-bottom: 10px;
  color: #495057;
  font-size: 13px;
  font-weight: 600;
}

.variable-config pre {
  background: white;
  padding: 15px;
  border-radius: 4px;
  border: 1px solid #dee2e6;
  font-size: 11px;
  overflow-x: auto;
  max-height: 300px;
  overflow-y: auto;
}

/* 变量管理面板样式 */
.variable-panel {
  margin-top: 20px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.variable-panel h4 {
  margin-bottom: 15px;
  color: #495057;
  font-size: 14px;
  font-weight: 600;
}

.variable-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.2s ease;
}

.btn-primary {
  background: #007bff;
  color: white;
}

.btn-primary:hover {
  background: #0056b3;
}

.btn-secondary {
  background: #6c757d;
  color: white;
}

.btn-secondary:hover {
  background: #545b62;
}

.btn-info {
  background: #17a2b8;
  color: white;
}

.btn-info:hover {
  background: #117a8b;
}

.btn-success {
  background: #28a745;
  color: white;
}

.btn-danger {
  background: #dc3545;
  color: white;
}

.btn-sm {
  padding: 4px 8px;
  font-size: 11px;
}

/* 变量列表样式 */
.variable-list {
  margin-top: 15px;
}

.variable-list h5 {
  margin-bottom: 10px;
  color: #495057;
  font-size: 13px;
  font-weight: 600;
}

.variable-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  margin-bottom: 8px;
  background: white;
  border-radius: 4px;
  border: 1px solid #dee2e6;
}

.variable-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.variable-id {
  font-size: 11px;
  color: #6c757d;
  font-family: monospace;
}

.variable-text {
  font-size: 12px;
  color: #495057;
  font-weight: 500;
}

.variable-index {
  font-size: 11px;
  color: #6c757d;
}

.variable-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.variable-input {
  padding: 4px 8px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  font-size: 11px;
  width: 120px;
}

/* 变量配置样式 */
.variable-config {
  margin-top: 15px;
}

.variable-config h5 {
  margin-bottom: 10px;
  color: #495057;
  font-size: 13px;
  font-weight: 600;
}

.variable-config pre {
  background: white;
  padding: 15px;
  border-radius: 4px;
  border: 1px solid #dee2e6;
  font-size: 11px;
  overflow-x: auto;
  max-height: 300px;
  overflow-y: auto;
}


</style> 